<template>
  <div class="pageContainer">
      <h3 style="margin-bottom: 16px;">{{ title }}</h3>
    <div class="formItem">
      <div class="formLabel">场景编号</div>
      <el-input v-model="form.channelNo"  class="inputType"
                placeholder="请输入场景编号"></el-input>
    </div>
    <div class="formItem">
      <div class="formLabel">场景名称</div>
      <el-input v-model="form.name" placeholder="请输入场景名称" :maxlength="20" class="inputType"></el-input>
    </div>
    <div class="formItem">
      <div class="formLabel">场景信息</div>
      <el-input type="textarea" :autosize="{ minRows: 4}" v-model="form.ticketInfo" class="inputType"></el-input>
    </div>
    <div class="formItem">
      <div class="formLabel">场景地址</div>
      <el-input v-model="form.address" placeholder="请输入场景地址" class="inputType"></el-input>
    </div>
    <div class="formItem">
      <div class="formLabel">联系人</div>
      <el-input v-model="form.contactName" placeholder="请输入联系人" class="inputType"></el-input>
    </div>
    <div class="formItem">
      <div class="formLabel">联系电话</div>
      <el-input v-model="form.contact" placeholder="请输入联系电话" class="inputType"></el-input>
    </div>
    <div class="formItem">
      <div class="formLabel">性别</div>
      <el-radio-group v-model="form.gender" class="genderRadio">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="2">女</el-radio>
      </el-radio-group>
    </div>
    <div class="formItem">
      <div class="formLabel">所在城市</div>
      <el-input v-model="form.city" placeholder="请输入所在城市" class="inputType"></el-input>
    </div>
    <div style="display: flex;margin-top: 22px;margin-left: auto;">
      <el-button type="primary" class="smallTextLightBtn" style="border: 0;" @click="handleCreate">提交</el-button>
      <el-button type="primary" class="smallTextBtn" style="border: 0;margin-bottom: 16px;" @click="() => $router.back()">返回
      </el-button>
    </div>
  </div>
</template>
<script>
import {createChannel, updateChannel} from "@/api/channel";
import {getThrottle} from "@/utils/utils";

export default {
  name:"CreateChannel",
  data() {
    return {
      title: '',
      lock: false,
      tagOptions: [],
      isEdit: false,
      form: {
        channelNo: '',
        name: '',
        ticketInfo: '',
        address: '',
        contactName: '',
        contact: '',
        gender: 1,
        city: ''
      }
    }
  },
  created() {
    const {query} = this.$route
    this.title = query.title
    if (query.data) {
      // 编辑
      const jsonData = JSON.parse(query.data)
      Object.assign(this.form, jsonData)
      this.isEdit = true
    } else {
      this.isEdit = false
    }
  },
  mounted() {
    this.handleCreate = getThrottle(this.handleCreate, 1000)
  },
  methods: {
    isMobile(mobile) {
      const reg = /^\+?[1-9]\d{1,14}$/;
      return reg.test(mobile);
    },
    handleCreate: function () {
      if (this.lock) return
      if(this.form.channelNo === null || this.form.channelNo === ''){
        return this.$message.error('请填写场景编号');
      }
      if(this.form.contactName === null || this.form.contactName === ''){
        return this.$message.error('请填写联系人姓名');
      }
      if(this.form.contact === null || this.form.contact === ''){
        return this.$message.error('请填写联系电话');
      }
      if(this.form.city === null || this.form.city === ''){
        return this.$message.error('请填写所在城市');
      }
      if(!this.isMobile(this.form.contact)) {
        return this.$message.error('请输入正确的手机格式')
      }
      console.log(this.form)
      this.lock = true
      if (this.isEdit) {
        updateChannel(this.form).then(res => {
          if (res) {
            this.$message.success('修改成功!')
            this.$router.back()
          }
          this.lock = false
        }).catch(err => this.lock = false)
      } else {
        createChannel(this.form).then(res => {
          if (res) {
            this.$message.success('添加成功!')
            this.$router.back()
          }
          this.lock = false
        }).catch(err => this.lock = false)
      }
    },
    getAllTag() {

    }
  }

}

</script>
<style scoped lang="scss">
.pageContainer {
  max-width: 430px;
  padding: 10px 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow-x: auto;
}

.formItem {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.formLabel {
  font-size: 14px;
  font-weight: 500;
  width: 120px;
}

.inputType {
  width: 250px;
}

.inputType ::v-deep .el-input-number__decrease {
  display: none;
}

.inputType ::v-deep .el-input-number__increase {
  display: none;
}

::v-deep .el-input-number--medium .el-input__inner {
  padding-left: 15px !important;
  text-align: left !important;
}

.genderRadio {
  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    border-color: var(--basicColor);
    background: var(--basicColor);
  }
  .is-checked ::v-deep .el-radio__label {
    color: var(--basicColor);
  }

}


</style>
